<template>
<div class="base-container">
  <t-form ref="form" :data="queryParams" label-width="80" @submit="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}" @reset="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}">

    <t-row style="border-bottom: 1px solid #E5E6EB;margin-bottom: 10px">
      <t-col :span="11" class="query-form-inline">
        <t-form-item label="角色名称" name="roleName">
          <t-input
            v-model="queryParams.roleName"
            clearable
            placeholder="请输入角色名称"
            style="width: 240px"
          />
        </t-form-item>
        <t-form-item label="权限字符" name="roleKey">
          <t-input
            v-model="queryParams.roleKey"
            clearable
            placeholder="请输入权限字符"
            style="width: 240px"
          />
        </t-form-item>
        <t-form-item clearable label="状态" name="status">
          <t-select style="width: 240px" placeholder="状态" :options="dict.type.sys_normal_disable" v-model="queryParams.status"></t-select>
        </t-form-item>
<!--        <t-form-item label="创建时间" name="dateRange">-->
<!--          <t-date-range-picker v-model="queryParams.dateRange" :placeholder="['开始时间','结束时间']" allow-input clearable/>-->
<!--        </t-form-item>-->
      </t-col>
      <t-col :span="1" class="operation-container">
        <t-button theme="primary" type="submit">查询</t-button>
        <t-button theme="default" variant="outline" type="reset">重置</t-button>
      </t-col>
    </t-row>
  </t-form>
  <div class="btn-group-inline">
    <t-button @click="dialog.header='添加角色';dialog.roleId=0;dialog.open_add_edit_role = true;" variant="outline" theme="primary">
      <t-icon name="add" slot="icon"/>
      新增
    </t-button>
  </div>
  <t-table
    rowKey="id"
    :data="data"
    :columns="columns"
    hover
    :pagination="pagination"
    :loading="dataLoading"
  >
    <template #status="{ row }">
      <t-switch @change="handleStatusChange(row)" :value="row.status==='0'?true:false">
      </t-switch>
    </template>
    <template #op="{ row }">
      <t-button @click="dialog.open_add_edit_role = true;dialog.header='修改角色';dialog.roleId=row.id" size="small" variant="text" class="t-button-link">
        <t-icon name="edit-1" slot="icon"/>
        修改
      </t-button>
      <t-button theme="danger" @click="deleteRole(row.id)" size="small" variant="text" class="t-button-link">
        <t-icon name="delete" slot="icon"/>
        删除
      </t-button>
      <t-dropdown  trigger="click">
        <t-button size="small" variant="text" class="t-button-link">
          <t-icon name="chevron-right-double" slot="icon"/>
          更多
        </t-button>
        <t-dropdown-menu  slot="dropdown">
          <t-dropdown-item class="no-margin-padding-dropdown-item"  @click="dialog.roleId=row.id;dialog.open_role_data=true"> <t-button  size="small" variant="text" class="t-button-link">
            <t-icon name="check-circle" slot="icon"/>
            数据权限
          </t-button></t-dropdown-item>
          <t-dropdown-item class="no-margin-padding-dropdown-item" @click="handleAuthUser(row)"><t-button  size="small" variant="text" class="t-button-link">
            <t-icon name="user" slot="icon"/>
            分配用户
          </t-button></t-dropdown-item>
        </t-dropdown-menu>
      </t-dropdown>

    </template>
  </t-table>
  <add-edit-role @reload="getList()" :header="dialog.header" :roleId="dialog.roleId" :visible.sync="dialog.open_add_edit_role" v-if="dialog.open_add_edit_role"></add-edit-role>
  <edit-role-data-permisstion :roleId="dialog.roleId" :visible.sync="dialog.open_role_data" v-if="dialog.open_role_data"></edit-role-data-permisstion>
</div>
</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, sysServiceList, selectServiceListByRoleId } from "@/api/system/role";
import AddEditRole from './components/add-edit-role.vue'
import editRoleDataPermisstion from './components/edit-role-data-permisstion.vue'


export default {
  name: "role-index",
  dicts: ["sys_normal_disable"],
  components:{
    AddEditRole,
    editRoleDataPermisstion
  },
  data(){
    return {
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        dateRange:[]
      },
      data:[],
      columns:[
        {
          colKey: "id",
          title: "角色编号",
          align: "center"
        },
        {
          colKey: "roleName",
          title: "角色名称",
          align: "center"
        },
        {
          colKey: "roleKey",
          title: "权限字符",
          align: "center"
        },
        {
          colKey: "roleSort",
          title: "显示顺序",
          align: "center"
        },
        {
          colKey: "status",
          title: "状态",
          align: "center"
        },
        {
          colKey: "createTime",
          title: "创建时间",
          align: "center"
        },
        {
          colKey: "op",
          title: "操作",
          align: "center",
          width:250
        },
      ],
      dataLoading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10,20,30],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination,pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
      dialog: {
        header: "",
        open_add_edit_role: false,
        open_role_data: false,
        roleId:0
      }
    }
  },
  created(){
    // 角色列表
    this.getList();
  },
  methods:{
    /** 查询角色列表 */
    getList() {
      this.dataLoading = true;
      listRole(this.queryParams).then(response => {
        this.data = response.rows;
        this.pagination.total = response.total;
        this.dataLoading = false;
      }
      ).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    onSubmit(){
      this.getList();
    },
    deleteRole(roleId){
      const confirmDia = this.$dialog.confirm({
        header:"系统提示",
        body:`是否确认删除角色编号为"${roleId}"的数据项？`,
        theme: "warning",
        onConfirm: ({ e }) => {
          confirmDia.update({
            confirmBtn: {
              loading: true,
            },
          })
          delRole(roleId).then(
            (res) => {
              this.getList();
              this.$message.success("删除成功");
              // 请求成功后，销毁弹框
              confirmDia.destroy();
            }
          ).catch((e) => {
            confirmDia.update({
              confirmBtn: {
                loading: false,
              },
            })
            this.$message.error(e.toString());
          });
        },
      })
    },
    handleStatusChange(row){
      const text = row.status === "1" ? "启用" : "停用";
      const status = row.status === "1" ? "0" : "1";
      const confirmDia = this.$dialog.confirm({
        header:"系统提示",
        body:`确认要${text}"${row.roleName}"角色吗？`,
        theme: "warning",
        onConfirm: ({ e }) => {
          confirmDia.update({
            confirmBtn: {
              loading: true,
            },
          })
          changeRoleStatus(row.id, status).then(
            (res) => {
              row.status = status;
              this.$message.success(`${text}成功`);
              // 请求成功后，销毁弹框
              confirmDia.destroy();
            }
          ).catch((e) => {
            confirmDia.update({
              confirmBtn: {
                loading: false,
              },
            })
            this.$message.error(e.toString());
          });

        },
      })
    },
    /** 分配用户操作 */
    handleAuthUser(row) {
      const roleId = row.id;
      this.$router.push(`/home/other/system/role/user/${roleId}`);
    },
  }
}
</script>

<style scoped>

</style>
